import type { imgProps } from '@nuxt/image/dist/runtime/components/nuxt-img';
<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-29 14:08:20
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-29 20:23:13
 * @FilePath: \nuxt3-music-player\src\components\Lists\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { getMusicUrl } from '~/server/api/music';
import type { Tracks } from '~/types/songs';

const props = defineProps<{
  data: Tracks;
  index: number;
}>();

const i = ref<number>(-1);

watch(
  () => props.index,
  () => {
    i.value = props.index + 1;
  },
  {
    immediate: true,
    deep: true
  }
);

/**
 * 隐藏
 */
const hidden = ref<boolean>(false);

const musicStore = useMusicStore();

/**
 * 播放音乐
 */
const playMusic = async (): Promise<void> => {
  const res = await getMusicUrl(props.data.id);
  console.log(res);
  if (res.code === 200) {
    console.log(musicStore);
    musicStore.playMusic(res.data[0], i.value);
  }
};
</script>

<template>
  <div
    class="h-auto w-full hover:bg-gray-900 hover:fill-white hover:text-white"
    @mouseenter="hidden = true"
    @mouseleave="hidden = false"
  >
    <div
      class="text-md grid grid-flow-col grid-cols-[5rem_1fr_0.5fr_0.5fr_5rem_5rem] h-9 px-2 font-semibold leading-9"
    >
      <span class="truncate">
        <div class="h-full flex items-center">
          <span v-if="!hidden">{{ i.toString().padStart(2, '0') }}</span>
          <svg-icon
            v-if="hidden"
            class="h-6 w-6 cursor-pointer"
            name="music-start"
            @click="playMusic"
          />
        </div>
      </span>
      <span class="mr-5 truncate">
        {{ data.name }}
      </span>
      <span class="mr-5 truncate">
        <span v-for="(items, index) in data.ar" :key="index">
          <template v-if="index != 1">
            {{ items.name }}
          </template>
          <template v-else>
            {{ '/' + items.name }}
          </template>
        </span>
      </span>
      <span class="mr-5 truncate">
        {{ data.al.name }}
      </span>
      <div class="flex items-center justify-center truncate">
        <svg-icon class="h-8 w-8 cursor-pointer" name="music-dislove" />
      </div>
      <span class="truncate">
        {{ transTimes(data.dt) }}
      </span>
    </div>
  </div>
</template>
